<template>
	<div class="flex-1">
		<transition-group
			tag="div"
			mode="out-in"
			@enter="onEnter"
			enter-active-class="animate__animated animate__fadeIn"
			:leave-active-class="
				'animate__animated animate__fadeOut' + (showSuceessList ? 'Down' : 'Left')
			">
			<betslip-item v-for="item in listData" :key="item.uuid" :data="item" />
		</transition-group>
	</div>
</template>

<script lang="ts" setup>
import BetslipItem from './betslip-item/index.vue'
import { useBetslipStore } from '@/store'
import { computed } from 'vue'
import gsap from 'gsap'

defineProps({
	showSuceessList: {
		type: Boolean,
		default: false
	}
})

const betslipStore = useBetslipStore()

const listData = computed(() => betslipStore.followList)

const onEnter = (el: any) => {
	const fromRect = betslipStore.fromRect
	const toRect = el.getBoundingClientRect()
	if (toRect && fromRect) {
		const elAnimated = document.createElement('div')
		elAnimated.className = `fixed z-10000 left-0 top-0 rounded-md bg-bg-3`
		document.body.appendChild(elAnimated)
		gsap.fromTo(
			elAnimated,
			{
				opacity: 0.8,
				x: fromRect.x,
				y: fromRect.y,
				width: fromRect.width,
				height: fromRect.height
			},
			{
				duration: 0.25,
				opacity: 0.8,
				x: toRect.x,
				y: toRect.y,
				width: toRect.width,
				height: toRect.height
			}
		)
		setTimeout(() => document.body.removeChild(elAnimated), 250)
	}
}
</script>

<style lang="scss" scoped>
.animate__fadeOutLeft {
	position: absolute !important;
}
</style>
